<template>
  <div>
    <button
      v-for="item in 5"
      :key="item"
      :class="{ active: item === page }"
      @click="$emit('update:page', item)"
    >
      {{ item }}
    </button>

    <select :value="limit" @change="$emit('update:limit', $event.target.value)">
      <option :value="10">10</option>
      <option :value="20">20</option>
      <option :value="30">30</option>
      <option :value="40">40</option>
    </select>
  </div>
</template>

<script>
  export default {
    name: "page",
    props: ["page", "limit"],
  };
</script>

<style>
  .active {
    background: red;
  }
</style>
